import React from 'react';
import { connect } from 'react-redux';
import { parseQueryString } from './../../utils';
import * as actions from './../../actions/a_course_record';
import { Link } from 'react-router-dom';
import {
  TimeIcon,
  CoordIcon,
  IsFinishedIcon,
  IsSignedIcon,
  NoTask
} from './../../icons';
import moment from 'moment';
import classnames from 'classnames';

class CourseRecordView extends React.Component {
  componentDidMount() {
    let {
      location = {}
    } = this.props;

    // let query = parseQueryString(location.search || '?code=shengjing360');
    // this.props.initRecords(query.code);
    this.props.initRecords('shengjing360');

    document.title = '上课记录';
  }
  render() {
    let {
      data,
      page = {}
    } = this.props;

    // 后台传的是null，不能用默认值，默认值只对undefined有效
    data = data || {};
    let result = [];

    for (let key in data) {
      if (data.hasOwnProperty(key)) {
        result.push({
          id: key,
          data: data[key]
        })
      }
    }

    if (!result.length) { // 没有任务
      return (
        <div className="my-tasks">
          <div className="no-task">
            <div className="empty-svg">
              <NoTask />
            </div>
            <p className="task-msg">您还没有预约上课哦</p>
          </div>
        </div>
      )
    } else {
      let size = page.size || 20;
      let number = page.number || 0;
      let total = page.total || 0;
      let canLoadMore = (number < (parseInt(total / size, 10)));

      return <div className="course-record">
        {
          result.map((item, index) => {
            let data = item.data;
            return <div className="month-courses" key={item.id}>
              <div className='top'>{item.id}月</div>
              {
                data.map((course, i) => {

                  let isAfter = moment(course.signInEndTime).isBefore(moment());
                  return <section key={i + ''} className={course.isFinished ? 'finished' : ''}>
                    <div className='panel'>
                      <div className='panel-main'>
                        <header>{course.qici}</header>
                        <main>
                          <p><TimeIcon />开课日期: {moment(course.beginTime).format('MM月DD日')}-{moment(course.endTime).format('MM月DD日')}</p>
                          <p><CoordIcon />{course.cityName}</p>
                        </main>
                      </div>
                      {
                        (course.isFinished === 1 || course.isSignIn === 1) && <aside>
                          {course.isFinished === 1 && <IsFinishedIcon />}
                          {course.isSignIn === 1 && <IsSignedIcon />}
                        </aside>
                      }
                    </div>
                    <footer>
                    
                      {isAfter?<button className='disabled'>查看住宿</button>:<Link to={'/appoint/accommodation/0/'+course.id}>查看住宿</Link>}
                      <Link to={'/personal/schedule/'+course.periodId+'/'+course.isSignIn}>查看日程表</Link>
                    </footer>
                  </section>
                })
              }

            </div>
          })
        }
        <p className={classnames('more', { 'canLoad': canLoadMore })}><button
          onClick={() => {
            if (canLoadMore) {
              this.props.moreRecords();
            }
          }}
        >点击查看更多</button></p>
      </div>
    }
  }
}

export default connect((store) => {
  return {
    ...store.courseRecord
  }
}, {
    ...actions
  })(CourseRecordView);